.Options {
  @apply grid gap-4 grid-cols-2 pt-5 p-4;
  grid-template-rows: repeat(6, 64px);

  .littleItem {
    @apply flex justify-center items-center gap-5;
  }

  .item {
    @apply rounded-xl cursor-pointer transition duration-300;
    background-color: rgba(var(--design-rgba-near), 0.3);
    height: 100%;

    &:hover {
      // background-color: rgba(var(--design-rgba-near), 0.4);
      .app-shadow();
    }
  }

  .itemActve {
    &:active {
      // background-color: rgba(var(--design-rgba-near), 0.3);
      transform: scale(0.98, 0.98);
    }
  }

  .lookMore {
    @apply absolute rounded-lg top-4 left-4 right-4 bottom-4 flex justify-center items-center opacity-0 transition;

    &:hover {
      @apply opacity-100;
      background-color: rgba(var(--design-rgba-near), 0.3);
      // -webkit-backdrop-filter: blur(2px);
      // backdrop-filter: blur(2px);
    }
  }

  .icon {
    width: 24px;
    height: 24px;
    @apply transition flex justify-center items-center rounded-md;

    &:hover {
      // background-color: rgba(var(--design-rgba-distant), 0.5);
      color: var(--design-text-color-1);
      font-size: 24px !important;
    }
  }

  .itemChecked {
    background-color: rgba(var(--design-rgba-distant), 0.6);
    color: var(--design-bg-color-5);
  }
}